<!doctype html>
<html class="no-js">

<head>
    <title>社区</title>
    <#include "/res/components/meta.html" />
    <#include "/res/components/stylesheets.html" />
    <link rel="stylesheet" type="text/css" href="/res/stylesheets/community.css?v=3">
</head>

<body>
    <div id="app">
        <#list items as item>
            <div class="item am-g">
                <input type="hidden" class="itemId" value="${item.id!}" />
                <div class="avator am-u-sm-2">
                    <img class="am-img-responsive" src="${item.logo!}" />
                </div>
                <div class="detail am-u-sm-10">
                    <div class="name">
                        <span class="theme-color">${item.name!}</span>
                        <span class="timeago" datetime="${item.addTime!}"></span>
                    </div>
                    <div class="content">
                        <span>${item.content!}</span>
                    </div>
                    <#if item.imgList??>
                        <ul data-am-widget="gallery" class="am-gallery am-avg-sm-3 am-gallery-default gallery" data-am-gallery="{ pureview: true }">
                            <#list item.imgList as photo>
                                <li>
                                    <a href="${photo}" class="">
                                        <div class="am-gallery-item gallery-item">
                                            <div class="fillimg"><img src="${photo}" /></div>
                                        </div>
                                    </a>
                                </li>
                            </#list>
                        </ul>
                    </#if>
                    <div class="other am-g">
                        <div class="heart">
                            <a href="javascript:" class="likeIt theme-color"><i class="am-icon-heart-o"></i></a>
                        </div>
                        <#if item.logoList??>
                            <#list item.logoList as user>
                                <#if user=="" && user?index==6>
                                    <div class="over">
                                        <img class="am-img-responsive am-circle" src="/res/assets/img/over.png">
                                    </div>
                                    <#else>
                                        <div class="user">
                                            <img class="am-img-responsive am-circle" src="${user}" />
                                        </div>
                                </#if>
                            </#list>
                        </#if>
                    </div>
                </div>
            </div>
            <hr />
        </#list>
        <div class="post theme-color theme-border-color">
            <i class="am-icon-pencil-square-o"></i>
        </div>
        <#include "/res/components/footer.html" />
    </div>
    <#include "/res/components/scripts.html" />
    <#include "/res/components/wxConfig.html" />
    <#include "/res/components/http.html" />
    <script src="https://cdn.bootcss.com/object-fit-images/3.2.3/ofi.min.js"></script>
    <script src="https://cdn.bootcss.com/timeago.js/3.0.2/timeago.min.js"></script>
    <script src="https://cdn.bootcss.com/timeago.js/3.0.2/timeago.locales.min.js"></script>
    <script>
    $(document).ready(function() {
        $(".fillimg").each(function() {
            $(this).height($(this).width());
        })

        // 设置time ago
        var timeagoInstance = timeago();
        var nodes = document.querySelectorAll('.timeago');
        // use render method to render nodes in real time
        timeagoInstance.render(nodes, 'zh_CN');

        $(".likeIt").click(function() {
            var nodes = $(this)[0].children;
            var iconNode = nodes[0]
            $(iconNode).addClass("am-icon-heart");
            $(iconNode).removeClass("am-icon-heart-o");
            console.log(iconNode)
            for (var index in nodes) {
                var node = nodes[index]
                // $(node).addClass("am-icon-heart");
                // $(node).removeClass("am-icon-heart-o");
            }

            var postId = $(this).parents(".item").find(".itemId").val();
            var url = "/tg/community/like";
            var params = {
                postId: postId
            };
            var success = function(data) {
                // message("点赞成功");
            }
            var fail = function() {}
            request(url, params, success, fail);
        })

        $(".post").click(function() {
            window.location.href = "/tg/community/post";
        })
    })
    </script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
    wx.ready(function() {
        initWXShare()
    })
    </script>
    <script type="text/javascript">
    objectFitImages('img');
    </script>
</body>

</html>